<!DOCTYPE html>
<html>
<head>
    @include("/include/_header.html", {'title':'测试背景'}){}
    <meta charset="utf-8">
    <title>全端复杂组合</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="${ctxPath}/externaljs/pixijs/pixi.min.js"></script>
    <script src="${ctxPath}/externaljs/sockjs/sockjs.min.js"></script>
    <script src="${ctxPath}/externaljs/stompjs/stomp.min.js"></script>
    <script src="${ctxPath}/externaljs/tweenmax/TweenMax.js"></script>
    <script src="${ctxPath}/externaljs/websocket/app-websocket.js"></script>
    <style>
        .marginTop{
            margin-top: 20px;
        }
        .big-size {
            zoom: 150%;
        }
        .deviceStatus {
            width: 900px;
            /*padding: 6px 6px;*/
            /*border: 1px solid #ccc;*/
            font-size: 16px;
            /*overflow: hidden;*/
            /*display: inline-block ;*/
        }
        .data-label {
            display: inline-block;
            padding: 3px 3px;
            background-color: #64e8fd;
            color: #1a1f28;
            font-size: 14px;
            font-weight: bold;
            border-radius: 4px;
            width: 58px;
            margin-top: 4px;
        }

        .data-container {
            font-size: 18px;
            /*margin-left: 3px;*/
            border: none;
            outline: none;
            /*color: #4b7ca4;*/
            color: white;
            font-weight: bold;
            border-radius: 4px;
            width: 58px;
            padding: 8px 8px;
            margin-top: 4px;
            background-color: transparent;

        }
        .redFont{
            color: red;
        }
    </style>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
            <div class="layui-card" style="background-color: #232324 !important;">
                <div class="layui-card-body">
                    <div id="pixi3#">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 13vh">
                <div class="layui-card-header head-font">3#任务状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="nowStatus3">当前状态</label>
                    <input class="data-container" type="text" id="nowStatus3" value="运行中">

                    <label class="data-label" for="nowMode3">当前模式</label>
                    <input class="data-container" type="text" id="nowMode3" value="下线">

                    <label class="data-label" for="nowTask3">当前任务</label>
                    <input class="data-container" type="text" id="nowTask3" value="下线">


                    <label class="data-label" for="nowStep3">当前步骤</label>
                    <input class="data-container" type="text" id="nowStep3" value="吸板">


                    <label class="data-label" for="nowSteel3">当前钢板</label>
                    <input class="data-container" type="text" style="width: 140px !important;" id="nowSteel3" value="Q321332131313">

                    <input class="task-data-container" type="text" id="unnormalStatus3" style="width: 400px !important;color: red;margin-top: -8px !important;font-size: 12px !important;height: 27px !important;border: none !important;background: transparent !important;" value="非正常状态显示区显示区显示区显示区">
                </div>
            </div>

        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 18vh">
                <div class="layui-card-header head-font">3#设备状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="runMode3">运行模式</label>
                    <input class="data-container" type="text" id="runMode3" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneXVal3">大车位置</label>
                    <input class="data-container" type="text" id="craneXVal3" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneZVal3">起升高度</label>
                    <input class="data-container" type="text" id="craneZVal3" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="isFault3">是否故障</label>
                    <input class="data-container" type="text" id="isFault3" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerLock3">辊道锁定</label>
                    <input class="data-container" type="text" id="rollerLock3" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="suckSteel3">吊具吸板</label>
                    <input class="data-container" type="text" id="suckSteel3" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerReady3">辊道就位</label>
                    <input class="data-container" type="text" id="rollerReady3" style="width: 84px !important;font-size: 17px !important;" value="">

                </div>
            </div>
        </div>

    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
            <div class="layui-card" style="background-color: #232324 !important;">
                <div class="layui-card-body">
                    <div id="pixi4#">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 13vh">
                <div class="layui-card-header head-font">4#任务状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="nowStatus4">当前状态</label>
                    <input class="data-container" type="text" id="nowStatus4" value="运行中">

                    <label class="data-label" for="nowMode4">当前模式</label>
                    <input class="data-container" type="text" id="nowMode4" value="下线">

                    <label class="data-label" for="nowTask4">当前任务</label>
                    <input class="data-container" type="text" id="nowTask4" value="下线">


                    <label class="data-label" for="nowStep4">当前步骤</label>
                    <input class="data-container" type="text" id="nowStep4" value="吸板">


                    <label class="data-label" for="nowSteel4">当前钢板</label>
                    <input class="data-container" type="text" style="width: 140px !important;" id="nowSteel4" value="Q321332131313">

                    <input class="task-data-container" type="text" id="unnormalStatus4" style="width: 400px !important;color: red;margin-top: -8px !important;font-size: 12px !important;height: 27px !important;border: none !important;background: transparent !important;" value="非正常状态显示区显示区显示区显示区">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 18vh">
                <div class="layui-card-header head-font">4#设备状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="runMode4">运行模式</label>
                    <input class="data-container" type="text" id="runMode4" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneXVal4">大车位置</label>
                    <input class="data-container" type="text" id="craneXVal4" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneZVal4">起升高度</label>
                    <input class="data-container" type="text" id="craneZVal4" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="isFault4">是否故障</label>
                    <input class="data-container" type="text" id="isFault4" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerLock4">辊道锁定</label>
                    <input class="data-container" type="text" id="rollerLock4" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="suckSteel4">吊具吸板</label>
                    <input class="data-container" type="text" id="suckSteel4" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerReady4">辊道就位</label>
                    <input class="data-container" type="text" id="rollerReady4" style="width: 84px !important;font-size: 17px !important;" value="">

                </div>
            </div>
        </div>

    </div>
    <div class="layui-row layui-col-space10">
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md3">
            <div class="layui-card" style="background-color: #232324 !important;">
                <div class="layui-card-body">
                    <div id="pixi5#">

                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 13vh">
                <div class="layui-card-header head-font">5#任务状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="nowStatus5">当前状态</label>
                    <input class="data-container" type="text" id="nowStatus5" value="运行中">

                    <label class="data-label" for="nowMode5">当前模式</label>
                    <input class="data-container" type="text" id="nowMode5" value="下线">

                    <label class="data-label" for="nowTask5">当前任务</label>
                    <input class="data-container" type="text" id="nowTask5" value="下线">


                    <label class="data-label" for="nowStep5">当前步骤</label>
                    <input class="data-container" type="text" id="nowStep5" value="吸板">


                    <label class="data-label" for="nowSteel5">当前钢板</label>
                    <input class="data-container" type="text" style="width: 140px !important;" id="nowSteel5" value="Q321332131313">

                    <input class="task-data-container" type="text" id="unnormalStatus5" style="width: 400px !important;color: red;margin-top: -8px !important;font-size: 12px !important;height: 27px !important;border: none !important;background: transparent !important;" value="非正常状态显示区显示区显示区显示区">
                </div>
            </div>
        </div>
        <div class="layui-col-xs6 layui-col-sm7 layui-col-md9">
            <div class="layui-card" style="height : 18vh">
                <div class="layui-card-header head-font">5#设备状态</div>
                <div class="layui-card-body">
                    <label class="data-label" for="runMode5">运行模式</label>
                    <input class="data-container" type="text" id="runMode5" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneXVal5">大车位置</label>
                    <input class="data-container" type="text" id="craneXVal5" style="width: 84px !important;font-size: 17px !important;" value="">


                    <label class="data-label" for="craneZVal5">起升高度</label>
                    <input class="data-container" type="text" id="craneZVal5" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="isFault5">是否故障</label>
                    <input class="data-container" type="text" id="isFault5" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerLock5">辊道锁定</label>
                    <input class="data-container" type="text" id="rollerLock5" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="suckSteel5">吊具吸板</label>
                    <input class="data-container" type="text" id="suckSteel5" style="width: 84px !important;font-size: 17px !important;" value="">

                    <label class="data-label" for="rollerReady5">辊道就位</label>
                    <input class="data-container" type="text" id="rollerReady5" style="width: 84px !important;font-size: 17px !important;" value="">

                </div>
            </div>
        </div>

    </div>
</div>
</body>
<script>
    layui.config({
        base: CXL.ctxPath + '/externaljs/'
    }).extend({ //设定组件别名
        echarts: 'echarts/echarts',
        axios: 'axios/axios'
    });
    layui.use(['table', 'laydate', 'form', 'layer', 'element', 'echarts', 'axios'], function () {
        var oBody = document.querySelector('body')
        oBody.ondblclick = function (e) {
            //alert(e.offsetX+"========"+e.offsetY);
            alert(e.clientX+"========"+e.clientY);
        }
        const oneAreaWidth=380;
        const oneAreaHeight=250;
        const rollerLeftWidth=20;
        const rollerTopHeight=20;
        const stackLeftWidth=240;
        const stackTopHeight=35;
        const stackWidth=110;
        const stackHeight=180;
        const rollerWidth=80;
        const rollerHeight=210;
        const rectFrameColor=0x00FF00;

        let rollerX3=0;
        let stock1X3=0;
        let rollerX4=0;
        let stock1X4=0;
        let rollerX5=0;
        let stock1X5=0;
        const app3 = new PIXI.Application({
            width: oneAreaWidth,
            height:oneAreaHeight,
            backgroundColor: 0x021e2e
        });
        const app4 = new PIXI.Application({
            width: oneAreaWidth,
            height:oneAreaHeight,
            backgroundColor: 0x021e2e
        });
        const app5 = new PIXI.Application({
            width: oneAreaWidth,
            height:oneAreaHeight,
            backgroundColor: 0x021e2e
        });

        const crane3Container = new PIXI.Container();
        const crane4Container = new PIXI.Container();
        const crane5Container = new PIXI.Container();
        document.getElementById("pixi3#").appendChild(app3.view);
        document.getElementById("pixi4#").appendChild(app4.view);
        document.getElementById("pixi5#").appendChild(app5.view);

        initDraw();
        initOther();
        function initDraw(){
            drawNo3Roller();
            drawNo3Stack();

            drawNo4Roller();
            drawNo4Stack();

            drawNo5Roller();
            drawNo5Stack();

            drawBigCrane3('0xbc4702',40,10,5,);
            drawSmallCrane3('0xa233c6',40,20,'天车');
            drawBigCrane4('0xbc4702',40,10,5,);
            drawSmallCrane4('0xa233c6',40,20,'天车');
            drawBigCrane5('0xbc4702',40,10,5,);
            drawSmallCrane5('0xa233c6',40,20,'天车');

            //TweenMax.to(crane3Container, 6, { x:300, y: crane3Container.y });
            //TweenMax.to(smallCraneContainer, 6, { x:400, y:300});
        }


        function initOther() {
            getNo3RollerAndStockX("3#横移");
            getNo4RollerAndStockX("4#横移");
            getNo5RollerAndStockX("5#横移");
            connect();

            //订阅任务信息
            setTimeout(function () {
                subscribeTaskStatus3("3#横移");
                subscribeTaskStatus4("4#横移");
                subscribeTaskStatus5("5#横移");
                subscribeTaskOtherStatus3("3#横移");
                subscribeTaskOtherStatus4("4#横移");
                subscribeTaskOtherStatus5("5#横移");
                subscribePlcData3("3#横移");
                subscribePlcData4("4#横移");
                subscribePlcData5("5#横移");
            }, 1000);

            setInterval(function () {
                no3CraneMove()
                no4CraneMove()
                no5CraneMove()
            }, 1000)
        }

        function no3CraneMove() {
            //小车高度y：      小车y：   大车、小车宽度：40
            //辊道高度y：    辊道宽度：80      辊道x：20  辊道y：20
            //垛位宽度：110    垛位x：240
            //(辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))=(辊道X-大车PLCX)/((辊道x+辊道宽度/2)-大车x)
            //大车x=(辊道x+辊道宽度/2)-(辊道X-大车PLCX)/((辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))
            let webX=(20+40)-(rollerX3-no3NowXval)/((rollerX3-stock1X3)/((20+40)-(240+55)))
            webX=webX-20;
            if(webX<40){
                webX=40;
            }
            if(webX>275){
                webX=275;
            }
            TweenMax.to(crane3Container, 1, { x:webX, y:crane3Container.y });
        }

        function no4CraneMove() {
            //小车高度y：      小车y：   大车、小车宽度：40
            //辊道高度y：    辊道宽度：80      辊道x：20  辊道y：20
            //垛位宽度：110    垛位x：240
            //(辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))=(辊道X-大车PLCX)/((辊道x+辊道宽度/2)-大车x)
            //大车x=(辊道x+辊道宽度/2)-(辊道X-大车PLCX)/((辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))
            let webX=(20+40)-(rollerX4-no4NowXval)/((rollerX4-stock1X4)/((20+40)-(240+55)))
            webX=webX-20;
            if(webX<40){
                webX=40;
            }
            if(webX>275){
                webX=275;
            }
            TweenMax.to(crane4Container, 1, { x:webX, y:crane4Container.y });
        }

        function no5CraneMove() {
            //小车高度y：      小车y：   大车、小车宽度：40
            //辊道高度y：    辊道宽度：80      辊道x：20  辊道y：20
            //垛位宽度：110    垛位x：240
            //(辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))=(辊道X-大车PLCX)/((辊道x+辊道宽度/2)-大车x)
            //大车x=(辊道x+辊道宽度/2)-(辊道X-大车PLCX)/((辊道X-垛位X)/((辊道x+辊道宽度/2)-（垛位x+垛位宽度/2))
            let webX=(20+40)-(rollerX5-no5NowXval)/((rollerX5-stock1X5)/((20+40)-(240+55)))
            webX=webX-20;
            if(webX<40){
                webX=40;
            }
            if(webX>275){
                webX=275;
            }
            TweenMax.to(crane5Container, 1, { x:webX, y:crane5Container.y });
        }


        function getNo3RollerAndStockX(craneType) {
            let craneTypeJson = JSON.stringify(craneType);
            let data = {
                craneType: craneTypeJson,
            };
            $.ajax({
                url: CXL.ctxPath + '/work/getRollerAndStockX',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        //console.log(res.data);
                        rollerX3=res.data.rollerX;
                        stock1X3=res.data.stock1X;
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        }

        function getNo4RollerAndStockX(craneType) {
            let craneTypeJson = JSON.stringify(craneType);
            let data = {
                craneType: craneTypeJson,
            };
            $.ajax({
                url: CXL.ctxPath + '/work/getRollerAndStockX',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        //console.log(res.data);
                        rollerX4=res.data.rollerX;
                        stock1X4=res.data.stock1X;
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        }

        function getNo5RollerAndStockX(craneType) {
            let craneTypeJson = JSON.stringify(craneType);
            let data = {
                craneType: craneTypeJson,
            };
            $.ajax({
                url: CXL.ctxPath + '/work/getRollerAndStockX',
                type: 'post',
                data: data,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        //console.log(res.data);
                        rollerX5=res.data.rollerX;
                        stock1X5=res.data.stock1X;
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        }

        function drawNo3Stack(){
            const stackframe = new PIXI.Graphics();
            stackframe.lineStyle(1.4,rectFrameColor,1,0);
            stackframe.drawRect(stackLeftWidth,stackTopHeight,stackWidth,stackHeight);
            app3.stage.addChild(stackframe);

            const stackText = new PIXI.Text("3#垛位", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            stackText.y=stackTopHeight+10;
            stackText.x =stackLeftWidth+stackWidth/2-stackText.width/2;
            app3.stage.addChild(stackText);
        }

        function drawNo3Roller(){
            const rollerframe = new PIXI.Graphics();
            rollerframe.lineStyle(1.4,rectFrameColor,1,0);
            rollerframe.drawRect(rollerLeftWidth,rollerTopHeight,rollerWidth,rollerHeight);
            app3.stage.addChild(rollerframe);

            const rollerText = new PIXI.Text("3#辊道", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            rollerText.y=rollerTopHeight+10;
            rollerText.x =rollerLeftWidth+rollerWidth/2-rollerText.width/2;
            app3.stage.addChild(rollerText);
        }

        function drawNo4Stack(){
            const stackframe = new PIXI.Graphics();
            stackframe.lineStyle(1.4,rectFrameColor,1,0);
            stackframe.drawRect(stackLeftWidth,stackTopHeight,stackWidth,stackHeight);
            app4.stage.addChild(stackframe);

            const stackText = new PIXI.Text("4#垛位", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            stackText.y=stackTopHeight+10;
            stackText.x =stackLeftWidth+stackWidth/2-stackText.width/2;
            app4.stage.addChild(stackText);
        }

        function drawNo4Roller(){
            const rollerframe = new PIXI.Graphics();
            rollerframe.lineStyle(1.4,rectFrameColor,1,0);
            rollerframe.drawRect(rollerLeftWidth,rollerTopHeight,rollerWidth,rollerHeight);
            app4.stage.addChild(rollerframe);

            const rollerText = new PIXI.Text("4#辊道", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            rollerText.y=rollerTopHeight+10;
            rollerText.x =rollerLeftWidth+rollerWidth/2-rollerText.width/2;
            app4.stage.addChild(rollerText);
        }

        function drawNo5Stack(){
            const stackframe = new PIXI.Graphics();
            stackframe.lineStyle(1.4,rectFrameColor,1,0);
            stackframe.drawRect(stackLeftWidth,stackTopHeight,stackWidth,stackHeight);
            app5.stage.addChild(stackframe);

            const stackText = new PIXI.Text("5#垛位", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            stackText.y=stackTopHeight+10;
            stackText.x =stackLeftWidth+stackWidth/2-stackText.width/2;
            app5.stage.addChild(stackText);
        }

        function drawNo5Roller(){
            const rollerframe = new PIXI.Graphics();
            rollerframe.lineStyle(1.4,rectFrameColor,1,0);
            rollerframe.drawRect(rollerLeftWidth,rollerTopHeight,rollerWidth,rollerHeight);
            app5.stage.addChild(rollerframe);

            const rollerText = new PIXI.Text("5#辊道", {
                fontSize: 14,
                fill: 0xFFFFFF
            });
            rollerText.y=rollerTopHeight+10;
            rollerText.x =rollerLeftWidth+rollerWidth/2-rollerText.width/2;
            app5.stage.addChild(rollerText);
        }

        function drawBigCrane3(color,width,height,leftWidth){
            const craneRectTop = new PIXI.Graphics();
            const craneRectBottom = new PIXI.Graphics();
            const craneRectLeft = new PIXI.Graphics();
            const cranRectRight = new PIXI.Graphics();
            craneRectTop.beginFill(color);
            craneRectTop.drawRect(0, 0, width, height);
            craneRectTop.endFill();
            craneRectLeft.beginFill(color);
            craneRectLeft.drawRect(0,0,leftWidth,app3.screen.height);
            craneRectLeft.beginFill();
            cranRectRight.beginFill(color);
            cranRectRight.drawRect(width - leftWidth,0,leftWidth,app3.screen.height);
            cranRectRight.endFill();
            craneRectBottom.beginFill(color);
            craneRectBottom.drawRect(0,app3.screen.height - height,width,height)
            craneRectBottom.endFill();
            crane3Container.addChild(craneRectTop);
            crane3Container.addChild(craneRectLeft);
            crane3Container.addChild(cranRectRight);
            crane3Container.addChild(craneRectBottom);
            app3.stage.addChild(crane3Container);
        }

        function drawSmallCrane3(color,width,height,name){
            const smallCrane = new PIXI.Graphics();
            smallCrane.beginFill(color);
            smallCrane.drawRect(0,115,width,height);
            smallCrane.endFill();
            const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
            craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
            craneName.y = 115 + smallCrane.height/2 - craneName.height/2;
            crane3Container.addChild(smallCrane);
            crane3Container.addChild(craneName);
            app3.stage.addChild(crane3Container);
        }

        function drawBigCrane4(color,width,height,leftWidth){
            const craneRectTop = new PIXI.Graphics();
            const craneRectBottom = new PIXI.Graphics();
            const craneRectLeft = new PIXI.Graphics();
            const cranRectRight = new PIXI.Graphics();
            craneRectTop.beginFill(color);
            craneRectTop.drawRect(0, 0, width, height);
            craneRectTop.endFill();
            craneRectLeft.beginFill(color);
            craneRectLeft.drawRect(0,0,leftWidth,app4.screen.height);
            craneRectLeft.beginFill();
            cranRectRight.beginFill(color);
            cranRectRight.drawRect(width - leftWidth,0,leftWidth,app4.screen.height);
            cranRectRight.endFill();
            craneRectBottom.beginFill(color);
            craneRectBottom.drawRect(0,app4.screen.height - height,width,height)
            craneRectBottom.endFill();
            crane4Container.addChild(craneRectTop);
            crane4Container.addChild(craneRectLeft);
            crane4Container.addChild(cranRectRight);
            crane4Container.addChild(craneRectBottom);
            app4.stage.addChild(crane4Container);
        }

        function drawSmallCrane4(color,width,height,name){
            const smallCrane = new PIXI.Graphics();
            smallCrane.beginFill(color);
            smallCrane.drawRect(0,115,width,height);
            smallCrane.endFill();
            const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
            craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
            craneName.y = 115 + smallCrane.height/2 - craneName.height/2;
            crane4Container.addChild(smallCrane);
            crane4Container.addChild(craneName);
            app4.stage.addChild(crane4Container);
        }

        function drawBigCrane5(color,width,height,leftWidth){
            const craneRectTop = new PIXI.Graphics();
            const craneRectBottom = new PIXI.Graphics();
            const craneRectLeft = new PIXI.Graphics();
            const cranRectRight = new PIXI.Graphics();
            craneRectTop.beginFill(color);
            craneRectTop.drawRect(0, 0, width, height);
            craneRectTop.endFill();
            craneRectLeft.beginFill(color);
            craneRectLeft.drawRect(0,0,leftWidth,app5.screen.height);
            craneRectLeft.beginFill();
            cranRectRight.beginFill(color);
            cranRectRight.drawRect(width - leftWidth,0,leftWidth,app5.screen.height);
            cranRectRight.endFill();
            craneRectBottom.beginFill(color);
            craneRectBottom.drawRect(0,app5.screen.height - height,width,height)
            craneRectBottom.endFill();
            crane5Container.addChild(craneRectTop);
            crane5Container.addChild(craneRectLeft);
            crane5Container.addChild(cranRectRight);
            crane5Container.addChild(craneRectBottom);
            app5.stage.addChild(crane5Container);
        }

        function drawSmallCrane5(color,width,height,name){
            const smallCrane = new PIXI.Graphics();
            smallCrane.beginFill(color);
            smallCrane.drawRect(0,115,width,height);
            smallCrane.endFill();
            const craneName =  new PIXI.Text(name, { fontSize: 18, fill: 0xffffff });
            craneName.x = 0 + smallCrane.width/2 - craneName.width/2;
            craneName.y = 115 + smallCrane.height/2 - craneName.height/2;
            crane5Container.addChild(smallCrane);
            crane5Container.addChild(craneName);
            app5.stage.addChild(crane5Container);
        }




        $("#onlineStartWork").click(function () {
            let postData={"onlinePath":whichPathIsSelect};
            $.ajax({
                url: CXL.ctxPath + '/craneWork/onlineStartTask',
                type: 'get',
                data:postData,
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("启动成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });


        $("#semiStopTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/stopSemiAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("停止成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });

        $("#autoStartTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/startAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("启动成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });

        $("#autoStopTask").click(function () {
            $.ajax({
                url: CXL.ctxPath + '/dispatch/semiorautoTask/stopAutoTask',
                type: 'get',
                dataType: 'json',
                success: function (res) {
                    if (res.success) {
                        CXL.success("停止成功");
                    } else {
                        CXL.error(res.msg);
                    }
                },
                fail: function () {
                    CXL.error("网络错误！");
                }
            });
        });


    });
</script>
</html>